<nz-drawer [nzClosable]="false" [nzVisible]="visible" nzPlacement="right" nzWidth="500px" nzTitle="设备保养任务"
           [nzFooter]="footerTpl"
           (nzOnClose)="close()">

  <nz-spin [nzSpinning]="nzLoading">

    <div>
      <label for="code">任务编号</label>
      <input nz-input id="code" [ngModel]="deviceMaintainTask.code" disabled="disabled" />
    </div>

    <div>
      <label for="device_name">设备名称</label>
      <input nz-input id="device_name" [ngModel]="deviceMaintainTask.deviceMaintainPlan?.device?.name"
             disabled="disabled" />
    </div>

    <div>
      <label for="user">保养人</label>
      <input nz-input id="user" [(ngModel)]="deviceMaintainTask.deviceMaintainPlan?.user.nickname" disabled />
    </div>


    <div>
      <label for="maintainContent">保养内容</label>
      <textarea id="maintainContent" [(ngModel)]="deviceMaintainTask.maintainContent" nz-input rows="3"
                placeholder="write any thing"></textarea>
    </div>

    <div>相关图片</div>
    <div class="clearfix">
      <nz-upload
        nzAction="api/file/upload"
        nzListType="picture-card"
        [(nzFileList)]="deviceMaintainTask.fileInfoList"
        [nzShowButton]="deviceMaintainTask.fileInfoList?.length < 8"
        [nzPreview]="handlePreview"
        [nzDownload]="handleDownload"
        (nzChange)="handleChange($event)"
      >
        <div>
          <i nz-icon nzType="plus"></i>
          <div style="margin-top: 8px">Upload</div>
        </div>
      </nz-upload>

    </div>


  </nz-spin>

  <ng-template #footerTpl>
    <div style="float: right" *ngIf="!isView">
      <button nz-button style="margin-right: 8px;" (click)="close()">取消</button>
      <button nz-button nzType="primary" (click)="submitForm(0)">暂存</button>
      <button nz-button nzType="primary" (click)="submitForm(1)">提交</button>
    </div>
  </ng-template>
</nz-drawer>
